<template>
  <view class="login-input-box">
    <view class="icon-box">

      <view
          @click="toChangPhoneAreaCode"
          class="icon">
        <view v-if="isPhone(param.to)">
          {{ "+" }}{{ param.phoneAreaCode }}
        </view>
        <image
            v-show="!isPhone(param.to)"
            class="icon-img" :src="$kt.file.byPath('icon/email.svg')" mode="widthFix"></image>
      </view>

    </view>

    <view class="input-box">
      <input
          autofocus
          class="input"
          @input="inputInput"
          v-model="param.to"
          :adjust-position="false"
          :placeholder="$i18n.zhToGlobal('电话号码')+' / '+$i18n.zhToGlobal('电子邮箱')"
          type="text"></input>
    </view>
  </view>
</template>

<script>

export default {
  props: ["bodyData"],
  data() {
    return {
      param: {
        phoneAreaCode: "86",
        to: '',
        methodCode: "phone"
      }
    };
  },
  created() {
    this.$emit("change", this.param);
  },
  methods: {
    isPhone(to) {
      if (!to || to.indexOf("@") === -1) {
        return true;
      }
      return false;
    },
    inputInput(e) {
      this.param.to = e.detail.value;
      if (this.isPhone(this.param.to)) {
        this.param.methodCode = "phone";
      } else {
        this.param.methodCode = "email";
      }
      this.$emit("change", this.param);
    },
    toChangPhoneAreaCode() {
      uni.showToast({
        title: this.$i18n.zhToGlobal("当前仅支持‘+86’"),
        icon: "none"
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/loginInput";
</style>
